<template>
  <div class="header-container">
   <div class="header-left flex-box">
    <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
              <Fold/>
            </el-icon>
            <ul class="flex-box">
              <li v-for="(item, index) in selectMenu" :key="item.path" class="tab flex-box" :class="{selected: route.path === item.path }">
                <el-icon  size="12">
                  <component :is="item.icon"></component>
                </el-icon>
                  <router-link class="text flex-box" :to="{path: item.path}">{{ item.name }}</router-link>
                  <el-icon class="close" size="12" @click="closeTab(item,index)">
                    <Close/>
            </el-icon>
              </li>
            </ul>
   </div>
   <div class="header-right">
    <el-dropdown  @command="handleClick">
   <div class="el-dropdown-link flex-box">
    <el-avatar
        :src="userInfo.avatar"
      />
      <p class="user-name">{{userInfo.name}}</p>
   </div>
    <template #dropdown>
        <el-dropdown-item command="cancel">退出</el-dropdown-item>
    </template>
  </el-dropdown>
   </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
//useRoute 用来访问当前路由对象，主要用于获取与当前路由相关的信息
//useRouter 用来访问路由实例，主要用于执行路由导航或修改路由行为。
import {useRoute, useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()
const store = useStore()
const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))
//获得了selectMenu这个数组
const selectMenu = computed(() => store.state.menu.selectMenu)

// 点击关闭tag
const closeTab = (item, index) => {
  store.commit('closeMenu', item)
  //删除的非当前页tag
  if(route.path !== item.path) {
    return 
  }
  const selectMenuData = selectMenu.value
  //如果是删除最后一项
  //这里已经是删除元素后的情况了,所以判断逻辑才是index===selectMenu.length
  if(index === selectMenuData.length) {
    //如果tag只有一个元素
    if(!selectMenuData.length) {
      router.push('/')
    }
    else{
      router.push({
        path: selectMenuData[index - 1].path
      })
    }
  }
  //如果删除的是中间位置的tag,选择原来被删除位置的后一个元素顶上来,由于删除时已经有了后一个元素接上来的情况,故位置不变
  else {
    router.push({
      path: selectMenuData[index].path
    })
  }
}
const handleClick = (command) => {
  if(command === 'cancel') {
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')

    window.location.href = window.location.orgin
  }
}
</script>

<style scoped lang="less">
.flex-box {
  display: flex;
  align-items: center;
  height: 100%;
}
a {
  height: 100%;
  color: #333;
  font-size: 15px;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: #fff;
  padding-right: 25px;
  .header-left{
    height: 100%;
    .icon {
      width: 45px;
      height: 100%;
    }
    .icon:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .tab {
      padding: 0 10px;
      height: 100%;
      .text {
        margin: 0 5px;
      }
      .close {
        visibility: hidden;
      }
      &.selected {
        a {
          color: #409eff;
        }
        i {
          color: #409eff;
        }
        background-color: #f5f5f5;
      }
    }
    .tab:hover {
      background-color: #f5f5f5;
      .close {
        visibility: inherit;
        cursor: pointer;
        color: #000;
      }
    }

  }
  .header-right{
    .user-name{
      margin-left: 10px;
    }
  }
}
</style>